<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="app">
    <!--<cpn1></cpn1>-->
<cpn2></cpn2>

        <template>{{name}}</template>


</div>
<template id="t1">
   <div>
       <p>343553</p>
       <cpn3></cpn3>
   </div>
</template>


<template id="t2">
    <span>你好</span>
</template>


<script src="../js/vue.js"></script>
<script src="../js/axios.js"></script>
<script>


    const data = {
        name: '张三',
        items: [
            {id: 1, text: '广东'}
        ],
        message: 'Hello',
    };


    const cpn3 = {
        template: '#t2',

    };
    const cpn2 = {
        template: '#t1',
        components: {
            cpn3:{
                template: '#t2'
            }
        }
    };


    const vm = new Vue({
        el: '#app',
        data:
            data
        ,
        components: {
            cpn2:cpn2
        },

        computed: {
            // 计算属性的 getter
            reversed: {

                get: function () {
                    // `this` 指向 vm 实例
                    return this.message.split('').reverse().join('')
                },
                set: function (newv) {
                    this.message = newv;
                    alert("我在摄制组加入新值" + newv)
                }
            }

        },
        methods: {}
    })


</script>
</body>
</html>
